<nz-layout>
    <!-- 头部-搜索框 -->
    <nz-header>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
            <input [(ngModel)]="SearchMsg" type="text" nz-input placeholder="请输入房源" />
          </nz-input-group>
          <ng-template #suffixButton>
            <button nzSearch (click)="goSearsh()">搜索</button>
          </ng-template>
    </nz-header>
    <!-- 筛选信息 -->
    <nz-content>
        <dl>
            <div class="list">
                <dt>区域</dt>
                <!--省 -->
                <dd>
                    <nz-select style="float: left;font-weight: 700;" [(ngModel)]="_selectedProvince" (ngModelChange)="provinceChange($event)">
                        <nz-option *ngFor="let p of provinceData" [nzValue]="p" [nzLabel]="p" ></nz-option>
                    </nz-select>
                </dd>
                <!-- 市 -->
                <dd>
                    <nz-select [(ngModel)]="selectedCity" (ngModelChange)="cityChange($event)">
                        <nz-option *ngFor="let c of cityData[_selectedProvince]" [nzValue]="c" [nzLabel]="c"></nz-option>
                    </nz-select>
                </dd>

                <!-- 区 -->
                <dd>
                    <nz-select [(ngModel)]="selectedRegion" (ngModelChange)="reginChange($event)">
                        <nz-option *ngFor="let c of RegionData[selectedCity]" [nzValue]="c" [nzLabel]="c"></nz-option>
                    </nz-select>
                </dd>
            </div>
            <div class="list">
                <dt >类型</dt>
                <dd  *ngFor="let item of siftList[0].options" [ngClass]="item==typeTure?'hightLight':''" (click)="siftType(item)">{{item}}</dd>
            </div>
            <div class="list">
                <dt >面积</dt>
                <dd *ngFor="let item of siftList[1].options" [ngClass]="item==areaTure?'hightLight':''" (click)="siftArea(item)">{{item}}</dd>
            </div>
            <div class="list">
                <dt >价格</dt>
                <dd *ngFor="let item of siftList[2].options" [ngClass]="item==RentTure?'hightLight':''" (click)="siftRent(item)">{{item}}</dd>
            </div>
            <div class="list">
                <dt >顺序</dt>
                <dd *ngFor="let item of siftList[3].options" [ngClass]="item==oderTure?'hightLight':''" (click)="siftOrder(item)">{{item}}</dd>
                <dd style="color: #c9c9c9;">(价格)</dd>
            </div>
        </dl>
    </nz-content>
    <!-- 房屋信息 -->
    <nz-footer>
        <nz-card *ngFor="let item of houseList" [nzHoverable]="true" style="width:30rem;height: 40rem;" (click)="gohouseDetail(item.Id)" [nzCover]="coverTemplate" [nzActions]="[]">
            <!-- <h2 class="title">{{item.Community}}</h2> -->
            <h2 class="title">{{item.DetailAddress}}</h2>
            <p class="money">{{item.Rent}}</p>
            <p>区域：{{item.Province}}-{{item.City}}-{{item.Region}}</p>
            <p>房屋面积：{{item.Size}}m² </p>
            <p>出租类型:{{item.Type===2?'合租':'整租'}}</p>
            <!-- <p>{{item.}}</p> -->
            <p>其他:{{item.Description}}</p>
            <ng-template #coverTemplate>
                <img style="height: 18rem;" alt="example" [src]=item.HousePicList._Items[0].PicUrl/>
                <!-- <img *ngFor="let img of item.HousePicList._Items" style="height: 18vh;" alt="example" [src]=item.HousePicList._Items[0].PicUrl/> -->
            </ng-template>
          </nz-card>
          <nz-pagination [nzPageIndex]="PageIndex" [nzTotal]='Total' [nzPageSize]="PageSize" (nzPageIndexChange)="PageIndexChange($event)"></nz-pagination>
    </nz-footer>
    
  </nz-layout>